<template>
    <div>
      <a-card :bordered="false" v-if="processData.length>0">
        <a-button type="primary" icon="setting" @click="configCommonlyUsed">设置常用流程</a-button>
        <desform-card
          class="desform-card"
          v-if="processSettingsArry.length"
          title="常用流程"
          :grids="processSettingsArry"
          @handClick="handClick"
        ></desform-card>
        <template v-for="(items,index) in getProcessDataByBusinessPlate">
          <desform-card
            class="desform-card"
            :title="filterDictTextByCache(index)"
            :grids="items"
            @handClick="handClick"
            :key="index"
          ></desform-card>
        </template>

        <!-- <a-card title="online表单" class="card" :headStyle="headStyle">
          <a-card-grid @click="handleOnlineClick" style="height:78px;text-align:center;">
            <span>online表单测试</span>
          </a-card-grid>
        </a-card> -->

        <!-- 设置常用流程 -->
        <often-process-config ref="opc" @ok="getProcessSettings"></often-process-config>
        <!-- 发起流程 -->
        <process-apply-modal ref="pam"></process-apply-modal>
      </a-card>
      <a-card :bordered="false" v-else>
        <h2 style="text-align: center;">未查询到可以申请的工单</h2>
      </a-card>
      <!-- online表单区域 -->
      <onl-cgform-auto-modal ref="modal" @success="handleSuccess" v-if="code" :code="code" />
    </div>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@/api/manage'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import desformCard from './components/desformCard'
import OftenProcessConfig from '@/views/process/components/OftenProcessConfig'
import ProcessApplyModal from '@/views/process/components/ProcessApplyModal'
import OnlCgformAutoModal from '@/views/modules/online/cgformys/auto/OnlCgformAutoModal'
import { startOnlInstance } from '@/api/process'
export default {
  name: 'BpmAutoDesformApply',
  components: {
    desformCard,
    OftenProcessConfig,
    ProcessApplyModal,
    OnlCgformAutoModal
  },
  mixins: [],
  computed: {
    getProcessDataByBusinessPlate() {
      var list = {}
      this.processData.forEach(function(item, i) {
        if (!list[item.businessPlate]) {
          list[item.businessPlate] = []
        }
        list[item.businessPlate].push(item)
      })
      return list
    }
  },
  data() {
    return {
      headStyle: {
        backgroundColor: 'rgb(234, 234, 234)'
      },
      processSettingsArry: [],
      url: {
        list: '/activiti/models/listAll',
        getColumns: '/online/cgform/api/getColumns/'
      },
      processData: [],
      checkedValues: {}, // 工单按业务分组，设置的常用时用业务分类做key值
      processSettings: {},
      modelId: '',
      formId: '',
      code: '',
      formTemplate: '4'
    }
  },
  methods: {
    getProcessSettings() { // 获取浏览器缓存流程code
      var key = this.$route.name + ':processSettings'
      this.processSettings = Vue.ls.get(key) || {}
      this.processSettingsArry = this.setProcessSettings()
    },
    setProcessSettings() { // 浏览器缓存只存了流程code 根据code获取流程信息
      var list = []
      let processSettingsArry = []
      Object.keys(this.processSettings).forEach(key => {
        processSettingsArry = processSettingsArry.concat(this.processSettings[key])
      })
      this.processData.forEach((item, i) => {
        if (processSettingsArry.indexOf(item.key) >= 0) {
          list.push(item)
        }
      })
      return list
    },
    configCommonlyUsed() {
      this.$refs.opc.visible = true
    },
    handClick(item) {
      if (item.formType === '1') {
        this.code = item.tableName
        setTimeout(() => {
          this.getFormTemplate()
        }, 500)
      } else {
        this.$refs.pam.showModel(item)
      }
    },
    filterDictTextByCache(text) {
      return filterDictTextByCache('business_sector', text)
    },
    handleOnlineClick() {
      // this.$refs.modal.add('4')
      this.getFormTemplate()
    },
    getFormTemplate() {
      getAction(`${this.url.getColumns}${this.code}`).then((res) => {
        this.formTemplate = res.result.formTemplate
        this.$refs.modal.add(this.formTemplate)
      })
    },
    handleSuccess(data) {
      startOnlInstance({
        tableId: this.code,
        formUrl: 'modules/bpm/task/form/OnlineFormDetail',
        formUrlMobile: 'online/OnlineDetailForm',
        formDataId: data.id
      }).then(res => {
        if (res.success) {
          this.$message.success('流程申请成功')
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  },
  mounted() {
    getAction(this.url.list, { isShow: true }).then((res) => { // 查询已有流程
      if (res.success) {
        this.processData = res.result
        this.getProcessSettings()
      } else {
        this.$message.warning(res.message)
      }
    }).catch((error) => {
      console.log(error)
    })
  }
}
</script>
<style  scoped>
  .desform-card{
    margin-top: 10px;
  }
</style>

